<template>
  <el-dialog :title="formProps.title || name + (data.id ? '编辑' : '创建')" :width="formProps.dialogWidth"
    :close-on-click-modal="false" v-model="dialogShow" append-to-body :before-close="closeDialog">
    <div style="padding-right: 100px;">
      <div :class="[isSplitScreen ? 'content-flex' : '']">
        <div class="flex1">
          <slot name='extra-area-top'></slot>
          <z-form :data="data" :formProps="formProps" :fields="fields">
            <template #[`${f.name}_${f.key}`]="{ key, data, props, events }"
              v-for="(f) in fields.filter(x => x.name == 'slotKey')">
              <slot :name="`${f.name}_${f.key}`" v-bind="{ key, data, props, events }"></slot>
            </template>
          </z-form>
          <slot name='extra-area'></slot>
        </div>
        <div v-if="isSplitScreen" :class="[formProps.rightClassName || '']"
          :style="{ width: formProps.rightScreen || '50%' }">
          <slot name="right-screen"></slot>
        </div>
      </div>

      <div class="text-right mt-10" v-if="!formProps.hiddenButton">
        <slot name="footer">
          <slot name="operation-left"></slot>
          <el-button @click="dialogShow = false">取消</el-button>
          <el-button v-if="!formProps.disabled" type="primary" @click="submit" :loading="submitLoading">确认
          </el-button>
          <slot name="operation"></slot>
        </slot>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import zForm from './form'

export default {
  name: 'z-form-dialog',
  components: { zForm },
  props: {
    name: { type: String, default: '' },
    fields: { type: Array, default: [] },
    data: { type: Object, default: {} },
    formProps: { type: Object, default: {} },
    modelValue: {
      type: Boolean,
      default: false,
    },
    submitLoading: { type: Boolean, default: false },
    isSplitScreen: { type: Boolean, default: false },
  },
  computed: {
    dialogShow: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('update:modelValue', val)
      },
    },
  },
  methods: {
    submit() {
      this.$emit('submit')
    },
    closeDialog() {
      this.dialogShow = false
      this.$emit('beforeClose')
    },

  },
}
</script>

<style lang="scss" scoped>
.content-flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
